<template>
	<view class="page">
		<mescroll-uni @init="mescrollInit" top="24" @down="downCallback" :up="upOption" @up="upCallback"
			@emptyclick="emptyClick">
			<view class="items" v-for="data in dataList">
				<view class="items_top" @click="details(data)">
					<view class="fun_row">
						<view class="fun_row_left">
							{{data.carTypeNum}}
						</view>
						<view class="fun_row_right">
							<view class="i"  :class="[getStateColor(data.applyStatus)]">
							</view>
							<view class="fun_row_right_title" style="background: none;" :class="[getStateColor(data.applyStatus)]">
								{{data.apply}}
							</view>
						</view>
					</view>
					<view class="row" v-if="data.applyStatus==7">
						放款金额：{{data.lendersAmount}}
					</view>
					<view class="row">
						价格：{{data.minPrice}}
					</view>
					<view class="row">
						品牌：{{data.brandName}}
					</view>
					<view class="row">
						身份证号：{{data.idCardNumber}}
					</view>
					<view class="row">
						申请时间：{{data.createTime}}
					</view>
					<view class="row" v-if="data.cause">
						原因：{{data.cause || ''}}
					</view>
				</view>
				<view class="items_bum">
					<view class="items_bum_li" @click="edit(data.id,data.applyStatus)" v-if="data.applyStatus=='19'">
						编辑
					</view>
					<view class="items_bum_li" @click="buChongZiLiao(data.id,data.applyStatus)" v-if="data.apply=='待补充资料'">
						补充资料
					</view>
					<view class="items_bum_li " @click="details(data)">
						查看详情
					</view>
				</view>
			</view>
		</mescroll-uni>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import orderMixin from "@/utils/mixin/orderMixin.js"
	export default {
		mixins: [MescrollMixin, orderMixin],
		data() {
			return {
				Words: '', //搜索的关键字
				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				top: "24rpx",
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
				dataList: [],
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// 判断状态
			matchState(state = '', reg) {
				return !!String(state).match(reg) //返回true/false
			},
			async getList() {
				//获取练习列表数据
				const res = await this.$post(`/biz/wxInstallment/myInstallments`, {
					current: this.pager.currentPage,
					size: this.pager.maxResultCount,
					FindKeyWords: this.Words,
					clientUserId: uni.getStorageSync('clientUserId')
				})
				if (res.data.data.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.dataList = []
					}
					this.dataList = this.dataList.concat(res.data.data.records)
				}
				this.mescroll.endBySize(res.data.data.size, res.data.data.total)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getList()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},
			// 详情
			details(data) {
				uni.navigateTo({
					url: `/pages/ke_hu_duan/wo_de_shen_qing/jin_jian_xiang_qing?installmentId=` + data.id
				})
			},
			// 用户取消订单
			cancellation(id) {
				console.log(id)
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '您确认要取消吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// showCancel: false,
					// 确认按钮的文字自定义
					confirmText: "确认",
					//删除字体的颜色，颜色最好是十六进制，不然程序发布上线会出问题
					confirmColor: '#ef111b',
					//取消字体的颜色
					cancelColor: '#000000',
					success: function(res) {
						//变量接this
						var that = this
						if (res.confirm) {
							// 执行确认后的操作
							that.cancellApi(id)
						} else {
							// 执行取消后的操作
						}
					}.bind(this)
				})
			},
			// 调取消接口
			async cancellApi(id) {
				const res = await this.$post(`/biz/wxInstallment/cancelMyInstallment`, {
					id: id
				})
				if (res.status) {
					this.$ToastOk(`${res.data.msg}`)
					this.getList()
				}else {
						uni.showToast({
							icon: 'none',
							title: '网络拥堵请重试',
							duration: 2000
						});
					}
			},
			// 用户删去订单
			del(id) {
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '您确认要删除吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// showCancel: false,
					// 确认按钮的文字自定义
					confirmText: "确认",
					//删除字体的颜色，颜色最好是十六进制，不然程序发布上线会出问题
					confirmColor: '#ef111b',
					//取消字体的颜色
					cancelColor: '#000000',
					success: function(res) {
						//变量接this
						var that = this
						if (res.confirm) {
							// 执行确认后的操作
							that.delApi(id)
						} else {
							// 执行取消后的操作
						}
					}.bind(this)
				})
			},
			// 调用删除接口
			async delApi(id) {
				const res = await this.$post(`/biz/wxInstallment/delMyInstallment`, {
					id: id
				})
				if (res.status) {
					this.$ToastOk(`${res.data.msg}`)
					this.getList()
				}
			},
			// 补充资料
			buChongZiLiao(id,applyStatus) {
				uni.setStorageSync('id', id)
				uni.navigateTo({
					url: './bu_chong_zi_liao?id='+id+'&type=0&applyStatus='+applyStatus
				})
				this.getList()
			},
			//跳回申请页面
			edit(id) {
				uni.navigateTo({
					url: '/pages/ke_hu_duan/wo_de_shen_qing/shen_qing_fen_qi?installmentId=' + id
				})
			}
		}
	}
</script>

<style>
	.page {
		overflow-y: hidden;
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.items {
		position: relative;
		width: 690rpx;
		/* height: 389rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 24rpx auto 0;
	}

	.items_top {
		box-sizing: border-box;
		padding: 0 50rpx;
		width: 100%;
		/* height: 294rpx; */
		overflow: hidden;
	}

	.items_bum {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 94rpx;
		border-top: 2rpx solid #F4F4FA;
	}

	.items_bum_li {

		width: 50%;
		height: 100%;
		font-size: 30rpx;
		font-family: "PingFang SC-Bold, PingFang SC";
		font-weight: bold;
		color: #000000;
		text-align: center;
		line-height: 94rpx;
	}

	.bli {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 94rpx;
		border-top: 2rpx solid #F4F4FA;
	}

	.items_bum .items_bum_li {
		border-right: 2rpx solid #F4F4FA;
	}

	.items_bum .items_bum_li:last-child {
		border-right: none;
	}

	.fun_row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 42rpx;
		margin: 28rpx 0 19rpx;
	}

	.fun_row_left {
		width: 400rpx;
		overflow: hidden;            // 溢出隐藏
		text-overflow: ellipsis;      // 溢出用省略号显示
		white-space: nowrap;         // 规定段落中的文本不进行换行
		font-size: 30rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #000000;
	}

	.fun_row_right_title {
		width: 120rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
	}

	.i {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.fun_row_right {
		display: flex;
		align-items: center;
	}

	.row {
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9E9E9E;
		margin-bottom: 12rpx;
	}

	/* 系统审核的状态颜色,状态为0时 */
	.daishengHeIcon {
		background: #ffaa00;
	}

	.daishengHeTtle {
		color: #ffaa00;
	}

	/* 终核中的状态颜色,状态为1时 */
	.shengHezhongIcon {
		background: #aa5500;
	}

	.shengHezhongTtle {
		color: #aa5500;
	}

	/* 放宽中的状态颜色,状态为2时 */
	.bohuiIcon {
		background: #00aaff;
	}

	.bohuiTtle {
		color: #00aaff;
	}

	/* 已放款的状态颜色,状态为3时 */
	.yifangkuanIcon {
		background: #005500;
	}

	.yifangkuanTtle {
		color: #005500;
	}

	/* 已驳回的状态颜色,状态为4时 */
	.yibohuiIcon {
		background: #ff9b74;
	}

	.yibohuiTtle {
		color: #ff9b74;
	}

	.yiguanbiIco {
		background: #cccccc;
	}

	.yiguanbi {
		color: #cccccc;
	}

	/* 已拒绝的状态颜色,状态为5时 */
	.yijujueIcon {
		background: red;
	}

	.yijujueTtle {
		color: red;
	}

	.details {
		position: absolute;
		right: 0;
		bottom: 50%;
		transform: translate(-50%, -50%);
	}
</style>